@import "_vars";
@import "_mixins";

#wrapper {
    .xl-widget-excerpt {
        width: 100%;
        // min-width: 500px;
        text-align: center;

        li {
            vertical-align: top;
        }


        // the submenu system
        // ------------------------------
        //===== set up some global navigation defaults
        .xl-nav {
            position: relative;
            z-index: 10;

            &, ul, li {
                          margin: 0;
                         padding: 0;
                      list-style: none;
                list-style-image: none;             // Corrects list images handled incorrectly in IE7
            }
            a {
                 display: block;
                overflow: hidden;                   // so that extra text will not override the navigation below

                &:hover {
                    border: none;                   // get rid of the sexy dotted hover style
                }
            }

            //===== SUBMENU system
            .submenu-parent {
                position: relative;

                ul {
                         width: 150px;              // give it a default width
                    text-align: left;               // and a default alignment
                      position: absolute;           // every ul child is absolutely positioned
                          left: 0;
                           top: 0;
                       display: none;               // of course this should be hidden
                }

                &:hover > ul,
                *&:hover ul {
                    // ie6 doesn't support the direct child selector,
                    // so we just let all ul's appear
                    // we only have one submenu in the usual xl websites anyway
                    display: block;                 // and appears only if the parent is hovered
                }
            }
        }


        //===== HORIZONTAL nav
        .xl-nav-horizontal {
            li {
                .display-inline-block;
            }

            .submenu-parent li {
                display: block;
            }
        }

        //===== VERTICAL nav
        .xl-nav-vertical {
            width: 200px;                           // default width

            .submenu-parent ul {
                // vertical nav has a default width,
                // so we'll just use this default for
                // the left origin
                left: 200px;
            }
        }


        .excerpt-content {
            height: 800px;
            background: #bbb;
            border: #999 1px solid;
            overflow: auto;

            ul,
            li {
                list-style: none;
                list-style-image: none; /* Corrects list images handled incorrectly in IE7 */
            }

            ul {
                margin: 0;
                padding: 0;
            }

            li {
                padding: 15px 0;
                text-align: center;
            }

            img {
                background: #fff url(../images/excerpt/loader.gif) center 40% no-repeat;
                .box-shadow(0 0 5px #666);
            }
        }
    }

    .js .excerpt-content {
        overflow: hidden;
    }


    //
    // THEMES
    // ==============================

    // DEFAULT
    .xl-widget-excerpt-theme-default {
        @excerptButtonsHeight   : 36px;

        .excerpt-controls {
            height: @excerptButtonsHeight;
            white-space: nowrap;
            padding: 10px;
            margin-bottom: 20px;
            background: #b7bfc3;
            text-align: left;
            line-height: @excerptButtonsHeight;
            font-size: 14px;
            color: @gray;
            .display-inline-block();
             padding-right: 0\9; // ie8 hack
            .border-radius(5px);

            .excerpt-button,
            .excerpt-dropdown,
            .excerpt-selection  {
                height: @excerptButtonsHeight;
                background: url("../images/excerpt/excerpt-sprite.jpg") left top no-repeat;
                cursor: pointer;
            }

            .excerpt-button-prev {
                width: 38px;
                background-position: 0px 0px;
            }

            .excerpt-button-next {
                width: 39px;
                background-position: -38px 0;
                margin-right: 10px\9;   // ie 8 hack
            }

            .excerpt-dropdown {
                margin-left: 10px;
                background-position: right top;

                .excerpt-selection {
                    padding-left: 10px;
                    margin-right: 45px;
                    background-position: -81px 0;
                    .display-inline-block();
                }
            }

            .excerpt-pageselect {
                .excerpt-selection {
                    max-width: 200px;
                    min-width: 60px;
                }
            }

            .excerpt-bookselect {
                .excerpt-selection {
                    max-width: 320px;
                    min-width: 120px;
                    overflow: hidden;
                }
            }

            // tweak the submenu system
            .submenu-parent {
                white-space: normal;

                &:hover ul {
                    display: none;
                }
                ul {
                    top: @excerptButtonsHeight - 2px;
                    background: #efefef;
                    border: #8a99a0 1px solid;
                    width: 99%;
                    .border-radius(0 0 3px 3px);
                    .box-shadow(0 3px 4px #444);
                }
                li {
                    height: auto;
                    line-height: 1.2em;
                    padding: 7px 10px;
                    *margin-left: -16px;

                    &:hover {
                        background: #d4e8ef;
                    }
                }
            }
        }
    }


    // METRO
    .xl-widget-excerpt-theme-metro {
        @excerptButtonsHeight   : 49px;
        @excerptButtonsWidth    : 44px;

        position: relative;

        .excerpt-content {
            background: url("../images/excerpt/bg.jpg");
        }

        .excerpt-controls {
            width: @excerptButtonsWidth;
            background: #000;
            color: #fff;
            border: #fff 1px solid;
            .box-shadow(0 0 5px #666);
            position: absolute;
            left: 5px;
            top: 5px;
            .opacity(20);
            .transition(opacity 3s);

            &:hover {
                .opacity(80);
                .transition(opacity 0.3s);
            }

            .excerpt-button,
            .excerpt-dropdown,
            .excerpt-selection  {
                .size(@excerptButtonsHeight, @excerptButtonsWidth);
                cursor: pointer;
            }

            .excerpt-button,
            .excerpt-dropdown {
                background: url("../images/excerpt/excerpt-sprite-metro.jpg") left top no-repeat;
            }

            .excerpt-selection {
                display: block;
                padding-right: 3px;
                .hide-text;
            }

            .excerpt-button-prev {
                height: 33px;
                background-position: 0px -98px;

                &:hover {
                    background-position: -44px -98px;
                }
            }

            .excerpt-button-next {
                height: 33px;
                background-position: 0px -131px;

                &:hover {
                    background-position: -44px -131px;
                }
            }

            .excerpt-pageselect {
                background-position: 0px 0px;

                &:hover {
                    background-position: -44px 0px;
                }

                ul {
                    min-width: 100px;
                    max-width: 200px;
                }
            }

            .excerpt-bookselect {
                background-position: 0px -49px;

                &:hover {
                    background-position: -44px -49px;
                }

                ul {
                    min-width: 200px;
                    max-width: 300px;
                }
            }

            // tweak the submenu system
            .submenu-parent {
                white-space: normal;

                &:hover ul {
                    display: none;
                }
                ul {
                    padding: 5px;
                    background: #000;
                    border: #fff 1px solid;
                    .box-shadow(0 0 5px #666);
                    left: 47px;
                    top: -1px;
                }
                li {
                    height: auto;
                    line-height: 1.2em;
                    padding: 7px 10px;

                    &:hover {
                        background: #252525;
                    }
                }
            }
        }
    }
}

@media (max-width: 1023px) {
    #wrapper {
        .xl-widget-excerpt-theme-default {
            .excerpt-content {
                padding-left: 10px !important;
                padding-right: 10px !important;
            }
        }
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    #wrapper {
        .xl-widget-excerpt-theme-default {
            .excerpt-content {
                padding-left: 10px !important;
                padding-right: 10px !important;
            }
            .excerpt-bookselect {
                .excerpt-selection {
                    min-width: 80px !important;
                    max-width: 150px !important;
                }
            }
        }
    }
}

@media (max-width: 767px) {
    #wrapper {
        .xl-widget-excerpt-theme-default {
            .excerpt-pageselect {
                display: none !important;
            }
            .excerpt-bookselect {
                .excerpt-selection {
                    min-width: 130px !important;
                    max-width: 200px !important;
                }
            }
        }
    }
}

@media (max-width: 479px) {
    #wrapper {
        .xl-widget-excerpt-theme-default {
            .excerpt-bookselect {
                .excerpt-selection {
                    min-width: 70px !important;
                    max-width: 88px !important;
                }
            }
        }
    }
}